<ion-header [translucent]="true">
	<ion-toolbar>
		<ion-buttons slot="start">
			<ion-menu-button></ion-menu-button>
		</ion-buttons>
		<ion-title>帮助</ion-title>
	</ion-toolbar>
	<ion-card>
		<ion-card-header>
			<ion-item>
				<ion-avatar slot="start">
					<img src="assets/icon/logo.svg">
				</ion-avatar>
				<ion-label>
					<h1>工具箱
						<small>Toolkit</small>
					</h1>
					<h2>支持图形界面、字符界面的工具箱</h2>
				</ion-label>
			</ion-item>
		</ion-card-header>
		<ion-card-content>
			<ion-item>
				<ion-icon name="information-circle" slot="start"></ion-icon>
				<ion-label>版本</ion-label>
				<ion-input [value]="version" readonly></ion-input>
			</ion-item>
			<ion-item>
				<ion-icon name="pulse" slot="start"></ion-icon>
				<ion-label>提交</ion-label>
				<ion-input [value]="gitCommit" readonly></ion-input>
			</ion-item>
			<ion-item>
				<ion-icon name="calendar-number" slot="start"></ion-icon>
				<ion-label>日期</ion-label>
				<ion-input [value]="buildTime | timeFormat" readonly></ion-input>
			</ion-item>
		</ion-card-content>
	</ion-card>
</ion-header>

<ion-content [fullscreen]="true">
	<ion-grid fixed>
		<ion-row>
			<ion-col size="12" size-md="6" *ngFor="let m of pages">
				<ion-card>
					<ion-card-header>
						<ion-item detail="false" lines="none" *ngIf="m.url" [routerLink]="m.url">
							<ion-icon [name]="m.icon" slot="start"></ion-icon>
							<ion-label>
								<h2>{{m.title}}</h2>
								<p>{{m.note}}</p>
							</ion-label>
						</ion-item>
						<ion-item detail="false" lines="none" *ngIf="!m.url">
							<ion-icon [name]="m.icon" slot="start"></ion-icon>
							<ion-label>
								<h2>{{m.title}}</h2>
								<p>{{m.note}}</p>
							</ion-label>
						</ion-item>
					</ion-card-header>

					<ion-card-content>
						<ion-list lines="none">
							<ng-container *ngFor="let s of m.items">
								<ion-item *ngIf="!s.url">
									<ion-label>
										<h3>{{s.title}}</h3>
									</ion-label>
									<ion-note slot="end">{{s.note}}</ion-note>
								</ion-item>
								<ion-item [routerLink]="s.url" *ngIf="s.url">
									<ion-label>
										<h3>{{s.title}}</h3>
									</ion-label>
									<ion-note slot="end">{{s.note}}</ion-note>
								</ion-item>
							</ng-container>
						</ion-list>
					</ion-card-content>
				</ion-card>
			</ion-col>
		</ion-row>
	</ion-grid>
</ion-content>
